<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        #J_goodsList {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #J_goodsList .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: 12px;
            line-height: 18px;
        }

        #J_goodsList .list li {
            width: -webkit-calc(20% - 10px);
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 10px;
        }

        #J_goodsList .list li:hover {
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
        }

        #J_goodsList .list li img {
            width: 80%;
            display: block;
            margin: 20px auto;
        }

        #J_goodsList .list li .price {
            color: #e4393c;
        }

        #J_goodsList .list li .name {
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            /* 对齐模式 */
            -webkit-box-orient: vertical;
            /* 超出第二行隐藏 */
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div id="J_goodsList">
        <ul class="list">
            <!-- <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li> -->
        </ul>
    </div>
</body>
<script>
    // 前端发送请求到后端 
    // 后端返回响应数据(商品列表)
    // 商品渲染到页面

    // 1. 动态生成之前先写静态页面 

    var listUl = document.getElementsByClassName("list")[0];

    var xhr = new XMLHttpRequest();
    xhr.open("get", "../data/list.json", true);

    xhr.send();

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log(result);
            var data = JSON.parse(result);
            console.log(data);

            var { list } = data;

            if (list.length > 0) { //有数据
                var html = ""
                list.forEach((item) => {
                    console.log(item);
                    var { goodsId, goodsName, goodsPrice, goodsImg, commentCount, shopName } = item;
                    html += `<li class="list-item">
                <img src="${goodsImg}"
                    alt="">
                <div class="price">¥${goodsPrice}</div>
                <div class="name">${goodsName}</div>
                <div class="comment">${commentCount}</div>
                <div class="shop-name">${shopName}</div>
            </li>`
                })
                listUl.innerHTML = html;
            }
        }
    }


</script>

</html>